<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            var panier = new Array;

            function addItemToPanier(itemId, itemTitle)
            {
                if (panier.length < 4)
                {
                    addToPanier = window.document.getElementById('addToPanier' + itemId);
                    if (null != addToPanier)
                    {
                        addToPanier.style.display = "none";
                    }
                    removeFromPanier = window.document.getElementById('removeFromPanier' + itemId);
                    if (null != removeFromPanier)
                    {
                        removeFromPanier.style.display = "inline";
                    }
                    if (!contains(panier, itemTitle))
                        panier.push(itemId);
                        insertRowTaPanierTable(itemId,itemTitle);
                }
                else
                {
                    Alert ("Votre pouvez ajouter seulement 4 items à votre Panier");
                }
            }

            function removeItemFromPanier(itemId, itemTitle)
            {
                removeFromPanier = window.document.getElementById('removeFromPanier' + itemId);
                if (null != removeFromPanier)
                {
                    removeFromPanier.style.display = "none";
                }
                addToPanier = window.document.getElementById('addToPanier' + itemId);
                if (null != addToPanier)
                {
                    addToPanier.style.display = "inline";
                }
                if (contains(panier, itemTitle))
                {
                    ahmed(itemId);
                    panier.remove(itemId);
                }
            }

  
            function validatePanierBeforSubmit () 
            {
                var numberOfItem = document.createElement('input');
                numberOfItem.style.visibility = "hidden";
                numberOfItem.name= 'numberOfItem';
                numberOfItem.value = panier.length;
                document.forms.validatePanierForm.appendChild(numberOfItem)
                var index = 0;
                while (index < panier.length) {
                    var newInput = document.createElement('input');
                    newInput.style.visibility = 'hidden';
                    newInput.name= 'item'+index;
                    newInput.value = panier[index];
                    document.forms.validatePanierForm.appendChild(newInput);
                    index++;
                }
            }
            
            function insertRowTaPanierTable(itemId,itemTitle)
            {
                var panierTable = document.getElementById('panierTable').insertRow(1);
                if (null != panierTable)
                {
                    var cell = panierTable.insertCell(0);
                    cell.id = itemId;
                    cell.innerHTML = itemTitle;
                }
            }
            
            function ahmed(itemId)
            {
                var panierTable = document.getElementById(itemId);
//                panierTable.parentNode.removeChild(panierTable);
                alert(panierTable.value);
            }
            
            function contains(a, obj) {
                var index = a.length;
                while (index--) {
                    if (a[index] === obj) {
                        return true;
                    }
                }
                return false;
            }
        </script>
        <title>Résultats de recherche</title>
    </head>
    <body>

        <h1>Liste des Items</h1>
        <form id="validatePanierForm"  onsubmit="validatePanierBeforSubmit()" action="ValidateUserPanier" method="post">
            <table id="itemsListTable" border="3">
                <tr >
                    <th bgcolor=>Titre</th>
                    <th bgcolor=>Action</th>
                </tr>
                <c:forEach var="item" begin="0" items="${requestScope.itemList}">
                    <tr>
                        <td>${item.titre}&nbsp;&nbsp;</td>
                        <td>
                            <input type="button" id="addToPanier${item.itemId}"  onclick="addItemToPanier('${item.itemId}', '${item.titre}')" value="Ajouter au Panier" />
                            <input type="button" id="removeFromPanier${item.itemId}" style="display : none" onclick="removeItemFromPanier('${item.itemId}', '${item.titre}')" value="Retirer du Panier" />
                        </td>

                    </tr> 
                </c:forEach>

            </table>
            </br></br>
            <input type="submit" id="validatePanier"  value="Valider votre Panier" />
        </form>
        <table id="panierTable" border="3">
                <tr>
                    <th bgcolor=>Item</th>
                </tr>
            </table>
       <a href="UserSpaceItem.jsp"><strong>Exécuter une nouvelle recherche</strong></a>
     </body>
 </html>
